<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			textarea {
				min-width: 200px;
				min-height: 200px;
				resize: none;
			}
		</style>
	</head>

	<body>
		<textarea></textarea> 剩余字数:
		<span></span>
		<script type="text/javascript">
			/*
			 * 在textarea里面输入任意信息的同时在span里面输出剩余的字数(最大字数长度为200)
			 * 当用户输入字数超过200时,不能让用户输入,但用户删除文字后,可以继续输入
			 */
			var textarea = document.querySelector("textarea");
			var span = document.querySelector("span");
			var now_num = 200;
			textarea.addEventListener("input", function(e) {
				now_num = 200 - textarea.value.length;
				span.innerText = (now_num);
			})
			textarea.addEventListener("keypress", function(e) {
				now_num <= 0 ? e.preventDefault() : "";
			})
		</script>
	</body>

</html>